<template>
  <div class="mod-config">
    <basic-container>
      <navigationRenWuShu :sign="{a:false,b:false,c:false,d:true,e:false,f:false}"></navigationRenWuShu>
      <div v-if="zhiShow=='1'" class="boxsty zhiBiao">
        <!-- <div class="flex justifyContentSpaceBetween">
            <div class="tabletext">任务书填报</div>
        </div> -->
        <div  :height="searchheight" >
          <span style="float:right;margin-top: -30px;cursor: pointer;" @click="searchchangeadvanced">{{ searchadvanced ? "查询条件收起" : "查询条件展开" }}
          <i :class="searchadvanced ? 'el-icon-arrow-up' : 'el-icon-arrow-down'" /> </span>
          <div  v-show="searchadvanced" >
            <div class="flex">
              <div>
                <el-form :model="form"  :inline="true" class="form-inline">
                  <el-form-item label="发约人姓名">
                    <el-input v-model="form.fayueName" placeholder="发约人姓名" style="width: 160px;" :clearable="true"></el-input>
                  </el-form-item>
                  <el-form-item label="发约人职务">
                    <el-input v-model="form.fayueZhiwu" placeholder="发约人职务" style="width: 160px;" :clearable="true"></el-input>
                  </el-form-item>
                  <el-form-item label="受约人姓名">
                    <el-input v-model="form.shouyueName" placeholder="受约人姓名" style="width: 160px;" :clearable="true"></el-input>
                  </el-form-item>
                  <el-form-item label="受约人职务">
                    <el-input v-model="form.shouyueZhiwu" placeholder="受约人职务" style="width: 160px;" :clearable="true"></el-input>
                  </el-form-item>

                  <el-form-item label="签订级别">
                    <el-select :clearable="true" v-model="form.signLevel" placeholder="请选择签订级别"  style="width:100%;"
                               class="xiaLa">
                      <el-option v-for="item in leveList" :key="item.value" :label="item.label" :value="item.value">
                      </el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item>
                    <el-button icon="el-icon-search" type="primary" class="marginLeft" @click="getDataList()">检索</el-button>
                  </el-form-item>
                </el-form>
              </div>
            </div>
          </div>
        </div>

        <div>
          <div class="mt10">
            任务书
            <span>
                        <el-radio v-model="radio" label="1">个人</el-radio>
                        <el-radio v-model="radio" label="2">机构</el-radio>
                    </span>
            <div style="float:right">
              <el-button type="primary" @click="faqiBatch">批量发起</el-button>
            </div>
          </div>
        </div>
        <el-table
          ref="table"
          style="width: 100%;margin-top:20px"
          :data="dataList"
          border
          v-loading="dataListLoading">
          <el-table-column type="selection" width="55" header-align="center" align="center"></el-table-column>
          <el-table-column type="index" width="80" header-align="center" align="center" label="序号"></el-table-column>
          <el-table-column prop="workAssignName" label="任务书名称" min-width="150" header-align="center" align="center"></el-table-column>
          <el-table-column
            prop="shouyueName"
            header-align="center"
            align="center"
            min-width="120"
            label="受约人姓名">
            <template slot-scope="scope">
              <div v-for="(item,index) in cutout(scope.row.shouyueName).slice(0, 2)">
                <el-tooltip class="item" :disabled="cutout(scope.row.shouyueName).length<3" effect="dark" :content="scope.row.shouyueName" placement="top-start">
                  <span>{{item}}<span v-if="cutout(scope.row.shouyueName).length>2&&index==1">...</span></span>
                </el-tooltip>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="shouyueZhiwu"
            header-align="center"
            align="center"
            min-width="180"
            label="受约人职务">

            <template slot-scope="scope">
              <div v-for="item in cutout(scope.row.shouyueZhiwu).slice(0, 2)">
                <el-tooltip class="item"  :disabled="item.length<8&&cutout(scope.row.shouyueZhiwu).length<3" effect="dark" :content="scope.row.shouyueZhiwu" placement="top-start">
                  <span>{{validatenull(item)?'-':item | ellipsis}}</span>
                </el-tooltip>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="fayueName"
            header-align="center"
            align="center"
            min-width="120"
            label="发约人姓名">
            <template slot-scope="scope">
              <div v-for="(item,index) in cutout(scope.row.fayueName).slice(0, 2)">
                <el-tooltip :disabled="cutout(scope.row.fayueName).length<3" class="item" effect="dark" :content="scope.row.fayueName" placement="top-start">
                <span>{{item}}<span v-if="cutout(scope.row.fayueName).length>2&&index==1">...</span></span>
                </el-tooltip>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="fayueZhiwu"
            header-align="center"
            align="center"
            min-width="180"

            label="发约人职务">
            <template slot-scope="scope">
              <div v-for="item in cutout(scope.row.fayueZhiwu).slice(0, 2)">
                <el-tooltip class="item" :disabled="item.length<8&&cutout(scope.row.fayueZhiwu).length<3" effect="dark" :content="scope.row.fayueZhiwu" placement="top-start">
                    <span>{{(validatenull(item)?'-':item) | ellipsis}}</span>
                </el-tooltip>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="indiNumbers" label="指标数量" min-width="100" header-align="center" align="center"></el-table-column>
          <el-table-column prop="signLevel" label="任务书级别" min-width="120" header-align="center" align="center" :formatter="signFormater"></el-table-column>
          <el-table-column label="操作" width="100" header-align="center" align="center"fixed="right">
            <template slot-scope="scope">
              <el-button type="primary" plain @click="faqi(scope.row.id)">发起</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="avue-crud__pagination">
          <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex"
                         :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="totalPage" background
                         layout="total, sizes, prev, pager, next, jumper">
          </el-pagination>
        </div>
      </div>
      <rwszbForm v-if="zhiShow==2" :rwszbForm='rwszbForm' v-on:zhibiaoChild='zhibiaoChild'></rwszbForm>

    </basic-container>
  </div>
</template>

<script>
import {fetchList, delObj,updateFilling,faqiData,faqiBatch} from '@/api/hetongrenwu/gongzuorenwushu/workAssigntbfq'
import rwszbForm from '@/views/hetongrenwu/components/renwushuzb-form.vue'
import { validatenull } from "@/util/validate";
export default {
  components:{
    rwszbForm
  },
  data(){
    return{
      dataList:[],
      dataListLoading:false,
      form:{},
      radio:'1',
      radioTwo:1,
      tableData:[],
      pageIndex:1,
      pageSize: 10,
      totalPage: 0,
      zhiShow:1,
      rwszbForm:{},
      gridData:[
        {
          zhiwu: '经理',
          name: '王小虎',
          status: '退回'
        }
      ],
      leveList:[
          {label:'所属单位部门负责人',value:'1'},
          {label:'本部一般管理人员',value:'2'},
          {label:'所属单位一般管理人员',value:'3'}
      ],
      genzongForm:{},
      searchadvanced: true,
      searchheight: '0',
      dialogVisible: false
    }
  },
  watch:{
    radio(value){
      if(value){
        this.getDataList();
      }
    }
  },
  filters:{
        ellipsis(value){
          if (!value) return '';
          if (value.length > 8) {
            return value.slice(0,8) + '...'
          }
          return value
        }
      },
  created() {
    this.getDataList()
  },
  methods:{
    searchchangeadvanced() {
      this.searchadvanced = !this.searchadvanced;
      if(this.searchadvanced){
        this.searchheight= 'auto'
      }
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val
      this.pageIndex = 1
      this.getDataList()
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val
      this.getDataList()
    },
    //拆分数据
    cutout(cellValue) {
      if (cellValue) {
        var c = cellValue.split(",");
        if(c.size<1){
          c.push('-');
          c.push('-');
        } else if(c.size<2){
          c.push('-');
        }
        return c;
      }
    },
    //判空
    validatenull(val){
      return validatenull(val)
    },
    // 获取数据列表
    getDataList() {
      this.dataListLoading = true
      fetchList(Object.assign({
        type:this.radio,
        fayueName:this.form.fayueName,
        fayueZhiwu:this.form.fayueZhiwu,
        shouyueZhiwu:this.form.shouyueZhiwu,
        signLevel:this.form.signLevel,
        shouyueName:this.form.shouyueName,
        current: this.pageIndex,
        size: this.pageSize,
        workAssignAuditStatus:7,
        contFillStatus:0
      })).then(response => {
        this.dataList = response.data.data.records;
        this.totalPage = response.data.data.total
      })
      this.dataListLoading = false
    },
    signFormater(row,column){
      const status = row.signLevel;
      if(status==1){
        return '所属单位部门负责人';
      }else if(status==2){
        return '本部一般管理人员';
      }else if(status==3){
        return '所属单位一般管理人员';
      }
    },
    faqi(data){
      var params={
        id:data,
        status:1
      }
      faqiData(params).then(res => {
        this.$message.success('发起成功')
        this.getDataList()
      })
    },
    //批量发起
    faqiBatch(){
      var data=this.$refs.table.selection;
      if(data.length==0){
        this.$message.error("请至少选择一个任务书！");
        return;
      }
      var ids=[];
      for(var i=0;i<data.length;i++){
        ids.push(data[i].id)
      }
      var idsStr=ids.join(',')
      this.$confirm('是否要发起吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(function () {
        return faqiBatch({ids:idsStr})
      }).then(data => {
        this.$message.closeAll();
        this.$message.success('发起成功')
        this.getDataList()
      })
    },
  }
}
</script>

<style>

</style>
